<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <style>
        @import "book.css";
    </style>
    <script>
        function $(id) {
          return document.getElementById(id);
        }
        window.onload = function () {
            axios.get("/users/getSessionUser").then(resp =>{
                if(resp.data == ""){
                    $("indexSpan").innerHTML="你好，请重新登录"+"<a href='/html/login.html'>登陆</a>"
                }
                else {
                    $("indexSpan").innerHTML = "欢迎，"+resp.data.name
                }
            });
            fullTable()
        }
        function  fullTable() {
           axios.get("/book/findAll").then(resp =>{
               var bookObj = resp.data
               var str =""
               bookObj.forEach(e =>{
                   str +=`<tr><td>${e.name}</td><td>${e.author}</td><td>${e.price}</td><td><input type="button" value="查看" onclick="findBy(${e.id})"></td></tr>`
               });
               $("bookDate").innerHTML = str
           })
        }
        function findBy(id) {
              $("speakTable").style.visibility="visible";
            $("speakTable").style.width = document.documentElement.clientWidth+"px"
            $("speakTable").style.height = document.documentElement.clientHeight+"px"
            axios.get("/book/findById",{
                params:{
                    id:id
                }
            }).then(resp =>{
                var str = ""
                var bookObj = resp.data;
                $("bookName").innerHTML = bookObj.name;
                $("author").innerHTML = bookObj.author;
                $("price").innerHTML = bookObj.price;
                $("bookImg").src = "/html/img/"+bookObj.img
                $("bookId").value = bookObj.id;

                bookObj.speaks.forEach(n =>{
                    str +=`<tr><td>${n.userBean.name}</td><td>${n.content}</td><td>${n.speakDate}</td></tr>`
                    $("speakDate").innerHTML = str;
                })
            });
        }
        function updateContent() {
            axios.get("/speak/add",{
               params:{
                   bookId:$("bookId").value,
                   content:$("speakContent").value
               }
            }).then(resp =>{
                 if(resp.data == "noLogin"){
                        location.href ="/html/login.html"
                }
                else if(resp.data =="ok"){
                     findBy($("bookId").value);
                     $("content").value= '';
                }
            });
        }
    </script>
</head>
<body>
     <span id="indexSpan"></span><br>
     <table border="1" width="60%" cellspacing="0">
         <thead>
         <tr><th>书名</th><th>作者</th><th>单价</th><th>查看</th></tr>
         </thead>
         <tbody id="bookDate"></tbody>
     </table>
     <div class="showDiv" id="speakTable">
         <div class="contentDiv">
             <input type="hidden" id="bookId">
            <img src="" style="width: 100px;height: 100px" id="bookImg"/><br>
             书名：<span  id="bookName"></span>
             作者:<span  id="author"></span>
             单价：<span  id="price"></span><br>

             <table border="1" width="50%" cellspacing="0">
                  <thead>
                   <tr><th>评论人</th><th>评论内容</th><th>评论日期</th></tr>
                  </thead>
                  <tbody id="speakDate"></tbody>
             </table>
             请输入评论：<input type="text" id="speakContent">
                      <input type="button" value="提交评论" onclick="updateContent()">
             <input type="button" value="返回" onclick="$('showDiv').style.visibility='hidden'">
         </div>
     </div>
</body>
</html>